<header class="header_form">
    <h1>Nouveau magasin</h1>
</header>

<form class="ajax_form" style="height: 230px;" action="./" method="post">
    <input type="hidden" name="todo" value="gestion[newShop]" />
    <p>
        <label>Nom</label>
        <input type="text" name="name" size="35" required />
    </p>
    <p>
        <label>Type</label>
        <select name="type">
            <option value="0">Autres</option>
            <option value="1">Supermarché</option>
            <option value="2">Hypermarché</option>
            <option value="3">Supérette</option>
        </select>
    </p>
    <p>
    <div id="localisation">
        <div id="loc1">
            <label for="region">Région</label>
            <select name="region" id="region">
                { foreach from=$regions item=region name=it }
                    <option value="{$region.0}">{$region.1}</option>
                {/foreach}
            </select>
        </div>
        <div id="loc2" style="display:none;">
            <label for="departement">Département</label>
            <select name="departement" id="departement">
            </select>
        </div>
        <div id="loc3" style="display:none;">
            <label for="ville">Ville</label>
            <select name="ville" id="ville">
            </select>
        </div>
        <div id="loc4" style="display:none;">
            <label for="adress">Adresse</label>
            <input type="text" name="adress" id="adress" size="35" required />
        </div>
    </div>
    <p id="bouton">
        <button type="submit">Valider</button>
    </p>
</form>

{literal}
<script>
    jQuery('form #region').change(function (){
        var regionID = jQuery(this).val();
        jQuery.getJSON('{/literal}{$SYS_FOLDER}{literal}services/formulaires/departement/'+regionID, function(data) {
            jQuery('#loc2').fadeIn();
            var options = '';
            var i = 0;
            jQuery.each(data, function(key, val) {
                if(i == 0){ loadVille(val[0]); } i++;
                options += "<option value='"+val[0]+"'>"+val[3]+"</option>";
            });
            jQuery('#departement').html(options);
        });
    });

    jQuery('form #departement').change(function (){ loadVille(jQuery(this).val()); })

    function loadVille(DepId){
        jQuery.getJSON('{/literal}{$SYS_FOLDER}{literal}services/formulaires/ville/'+DepId, function(data) {
            jQuery('#loc3, #loc4').fadeIn();
            var options = '';
            jQuery.each(data, function(key, val) {
                options += "<option value='"+val[0]+"'>"+val[2]+"</option>";
            });
            jQuery('#ville').html(options);
        });
    }
    
    jQuery('form #region').change();
</script>
{/literal}